<script lang="ts" setup>
// @ts-ignore
import email from '@/assets/user-center/email.png'
// @ts-ignore
import image1 from '@/assets/theme/1.png'
// @ts-ignore
import image2 from '@/assets/theme/2.png'
// @ts-ignore
import image3 from '@/assets/theme/3.png'
// @ts-ignore
import {Message} from "@arco-design/web-vue";

definePageMeta({
    layout: false,
})
useHead({
    bodyAttrs: {
        class: 'page-template-default page page-child user-profile'
    }
})

const userStore = useUserStore()
const userInfo = computed(() => {
    return userStore.userInfo
})

function todo() {
    Message.warning('后面再写，懂我意思吧!')
}
</script>
<template>
    <NuxtLayout name="common">
        <template v-slot:nav>
            <Nav :title="'修改资料'"/>
        </template>
        <template v-slot:main>
            <CardBox>
                <CardItem
                        :title="'星球头像'"
                        :desc="'星球头像 可用于评论展示头像'"
                        :image="userInfo.avatar">
                    <template v-slot:other>
                        <a href="javascript:" class="user-profile-submit" role="button" @click="todo">修改</a>
                    </template>
                </CardItem>
                <CardItem
                        :title="'星球邮箱'"
                        :desc="userInfo.email ? userInfo.email : '暂无邮箱'"
                        :image="email">
                    <template v-slot:other>
                        <a href="javascript:" class="user-profile-submit" role="button" @click="todo">修改</a>
                    </template>
                </CardItem>
                <CardItem
                    :title="'订阅通知'"
                    :desc="'订阅通知即时获取文章更新通知。'"
                    :image="image2">
                    <template v-slot:other>
                        <a href="javascript:" class="user-profile-submit" role="button" @click="todo">修改</a>
                    </template>
                </CardItem>
                <CardItem
                    :title="'星球地址'"
                    :desc="userInfo.website ? userInfo.website : '暂无地址'"
                    :image="image1">
                    <template v-slot:other>
                        <a href="javascript:" class="user-profile-submit" role="button" @click="todo">修改</a>
                    </template>
                </CardItem>
                <CardItem
                    :title="'星球介绍'"
                    :desc="userInfo.intro ? userInfo.intro : '暂无介绍'"
                    :image="image3">
                    <template v-slot:other>
                        <a href="javascript:" class="user-profile-submit" role="button" @click="todo">修改</a>
                    </template>
                </CardItem>
            </CardBox>
        </template>
    </NuxtLayout>
</template>
<style scoped>
.user-profile-submit{
    display: block;
    width: 100%;
    color: #fff;
    padding: 0.125rem 1rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, var(--bg) 20%,rgb(var(--color-rgb) / .8) 30%, rgb(var(--color-sub-rgb) / .8) 70%, var(--bg) 80%) 50% / 300% 100%;
    box-shadow: 0 0 1rem 0 rgb(var(--color-rgb) / .2), 0 0.5rem 1rem -0.5rem rgb(var(--color-rgb) / .5);
    border-radius: var(--radius);
}
</style>
